<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <!-- 
    核心实现：
      高亮部分：通过控制 z-index 的值，让目标元素展示在蒙层之上
      引导部分：通过 position: fixed 实现定位效果，并通过动态修改left、top属性实现引导弹出跟随目标移动
      过渡动画：通过transition实现位置的平滑移动。
      页面、位置、内容发生变化时（如resize、scroll事件），需要重新计算位置信息

      使用 svg 作为蒙层，从中抠出高亮元素区域
  -->
    <div class="btn-group">
      <button id="btn1">新增</button>
      <button id="btn2">删除</button>
      <button id="btn3">修改</button>
      <button id="btn4">完成</button>
    </div>

    <button id="btn5">test1</button>
    <button id="btn6">test2</button>
    <button id="btn7">test3</button>

    <svg id="mask" class="mask" xmlns="http://www.w3.org/2000/svg">
      <path id="path" d="M0 0 L50 0 L50 100 L0 100 Z" />
    </svg>

    <div id="guideBox" class="guide-box">
      <div id="guideMessage"></div>
      <button id="guidePrevBtn" class="guide-btn prev">上一步</button>
      <button id="guideNextBtn" class="guide-btn next">下一步</button>
    </div>

    <script src="./index.js"></script>
  </body>
</html>
